<template>
  <div>
<!--    <input type="checkbox" name="matter" id="" :checked="isAll" @change="checkAll">-->
    <input type="checkbox" name="matter" id="" v-model="isAll">
    &nbsp;已完成 <span>{{haveDone}}</span> / 全部 <span>{{total}}</span>
    <button @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props:['todos'],
  computed:{
    total(){
      return this.todos.length
    },
    haveDone(){
      return this.todos.reduce((pre,current)=>{
        return pre+(current.done?1:0)
      },0)
    },
    // isAll(){
    //   return this.haveDone===this.total&&this.total>0
    // },
    isAll:{
      get(){
        return this.haveDone===this.total&&this.total>0
      },
      set(value){
        // this.todos.forEach(todo=>todo.done=value)
        // this.checkAllTodo(value)
        this.$emit("checkAllTodo",value)
      }
    }
  },
  methods:{
    checkAll(e){
      // this.checkAllTodo(e.target.checked)
      this.$emit("checkAllTodo",e.target.checked)
    },
    clearAll(){
      if(confirm('确定删除已完成任务吗？')){
        // this.clearAllTodo()
        this.$emit("clearAllTodo")
      }
    }
  }

}
</script>

<style scoped lang="less">
div{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  //border: 1px solid rgba(87, 87, 87, 0.3);
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      background-color: #c9302c;
      border: 1px solid #ac2925;
    }
  }
}
</style>
